<template>
	<div class="main">
		
			<!-- 表单内容区 -->
			
			<el-card shadow="never" class="content-card">
				<div slot="header" class="clearfix">
					<el-button type="primary" size="small"  @click="dialogFormVisible = true">新增</el-button>
					
				</div>
			<!-- 新增模态框 -->
			<el-dialog title="广告详情" :visible.sync="dialogFormVisible" width="800px">
			  <el-form :model="form" :inline="true"  ref="form">
			    <el-form-item label="品牌名称" prop="name">
			      <el-input v-model="form.name" autocomplete="off" style="width: 300px; height: 30px;"></el-input>
			    </el-form-item>
				<el-form-item label="品牌故事" prop="brandStory">
				  <el-input v-model="form.brandStory" autocomplete="off" style="width: 300px; height: 30px;"></el-input>
				</el-form-item>
				<el-form-item label="首字母">
				  <el-input v-model="form.firstLetter " autocomplete="off" style="width: 300px; height: 30px;"></el-input>
				</el-form-item>
				<el-form-item label="排序">
				  <el-input v-model="form.sort" autocomplete="off" style="width: 300px; height: 30px;"></el-input>
				</el-form-item>
				<el-form-item label="产品数量"  prop="productCount">
				  <el-input v-model="form.productCount" autocomplete="off" style="width: 300px; height: 30px;"></el-input>
				</el-form-item>
				<el-form-item label="是否展示">
				 <el-switch
				   v-model="form.showStatus"
				  active-color="#13ce66"
				      inactive-color="#ff4949"
				   :active-value="1"
				   :inactive-value="0"
				 				>
				 </el-switch>
				</el-form-item>
				<el-form-item label="是否为品牌制造商">
				 <el-switch
				   v-model="form.factoryStatus"
				  active-color="#13ce66"
				      inactive-color="#ff4949"
				   :active-value="1"
				   :inactive-value="0"
				 				>
				 </el-switch>
				</el-form-item>
				
			
				
			<div>
				<el-form-item label="上传专区大图">
				 <el-upload
				 :headers="headers"
				   action="/lejuAdmin/material/uploadFileOss"
				   list-type="picture-card"
				  
				   :on-remove="handleRemove"
				   :on-success="shangchuan">
				  <i class="el-icon-plus"></i>
				 </el-upload>
				
				   <img width="100%" :src="form.bigPic" alt="" style="width: 100px;height: 100px;">
				
				</el-form-item>
				<el-form-item label="上传Logo">
				 <el-upload
				 :headers="headers"
				   action="/lejuAdmin/material/uploadFileOss"
				   list-type="picture-card"
				  
				   :on-remove="handleRemove2"
				   :on-success="shangchuan2">
				  <i class="el-icon-plus"></i>
				 </el-upload>
				
				   <img width="100%" :src="form.logo" alt="" style="width: 100px;height: 100px;">
							
				</el-form-item>
			</div>
				
				
				
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="close">确 定</el-button>
			  </div>
			</el-dialog>
			
			
			
			
			
			
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column fixed type="index" align="center" width="150">
					</el-table-column>
					<el-table-column prop="name" label="品牌名称" align="center" width="150">
					</el-table-column>
			<el-table-column label="展示状态" width="100">
				<template slot-scope="scope">
					是否展示
					<el-switch v-model="scope.row.showStatus" align="center"
						:active-value="1" :inactive-value="0">
					</el-switch>
				</template>
			</el-table-column>
					<el-table-column label="logo" width="120">
						<template slot-scope="scope">
							<img :src="scope.row.logo" alt="" style="width: 80px; height: 80px;">
						</template>
					</el-table-column>
					<el-table-column label="专区大图" width="120">
						<template slot-scope="scope">
							<img :src="scope.row.bigPic" alt="" style="width: 80px; height: 80px;">
						</template>
					</el-table-column>
					<el-table-column prop="brandStory" label="品牌故事" align="center" width="150">
					</el-table-column>
					<el-table-column label="创建时间" align="center" width="180">
						<template slot-scope="scope">
							<div>{{scope.row.createTime}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="sort" label="排序" align="center" width="150">
					</el-table-column>
					<el-table-column prop="productCount" label="产品数量" align="center" width="150">
					</el-table-column>
					<el-table-column label="是否品牌制造商" align="center" width="180">
						<template slot-scope="scope">
							<div>{{scope.row.factoryStatus == 1? '是':'不是'}}</div>
						</template>
					</el-table-column>
				
					<el-table-column fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<el-button  type="text" size="small"  @click="edit(scope.row)">编辑</el-button>
							<el-button type="text" size="small"@click="remove(scope.row.id)" >删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<div class="block">
			
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page.currentpage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="page.total">
					</el-pagination>
				</div>
			
			
			</el-card>
			
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/myAuth.js"
	import{
		findBrandByPage,
		delBrand,
		addBrand,
		updateBrand
	}from "@/api/commodity/administration/index.js"
	export default{
		data(){
			const token = getToken()
			return{
				headers: {
					token: token
				}, //上川文件的请求头
				form:{
					name:"",
					firstLetter :"",
					sort:"",
					productCount:1,
					showStatus:1,
					factoryStatus:1,
					bigPic:"",
					logo:"",
					brandStory:""
				},
				dialogFormVisible: false,
				tableData:[],
				// 分页对象
				page: {
					currentpage: 1,
					pageSizes: [10, 15, 20, 25],
					pageSize: 10,
					total: 0
				},
				id:""
			}
		},
		methods:{
			//编辑
			edit(val){
				this.id = val.id
				this.dialogFormVisible = true;
				this.form = val
				
			},
			// 新增确定
			close(){
				if(this.id){
					updateBrand(this.form).then(res=>{
						console.log(res)
						if(res.success){
							this.$message.success("编辑成功")
							this.dialogFormVisible = false;
							this.getFindBrandByPage()
						}
					})
				}else{
					addBrand(this.form).then(res=>{
						console.log(res)
						if(res.success){
							this.$message.success("新增成功")
							this.dialogFormVisible = false;
							this.getFindBrandByPage()
						}
					})
				}
				
			},
			// 上传照片成功后
			shangchuan(val){
				
				this.form.bigPic = val.data.fileUrl
			},
			// 上传2
			shangchuan2(val){
				
				this.form.logo = val.data.fileUrl
			},
			//上传照片
			handleRemove2(file, fileList) {
			        console.log(file);
					this.$options.data().form.logo
				
			      },
			//上传照片
			handleRemove(file, fileList) {
			        console.log(file);
					this.$options.data().form.bigPic
				
			      },
			     
			// 删除
			remove(id){
				this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					delBrand(id).then(res=>{
						console.log(res)
						if(res.success){
							this.$message.success("删除成功")
							this.getFindBrandByPage()
						}else{
							this.$message.error("删除失败")
						}
					})
				})
			},
			// 分页
			handleSizeChange(val) {
				this.page.pageSize = val
				this.getFindBrandByPage()
			},
			handleCurrentChange(val) {
				this.page.currentpage = val
				this.getFindBrandByPage()
			},
			// 获取品牌列表
			getFindBrandByPage(){
				findBrandByPage(this.page.currentpage, this.page.pageSize).then(res=>{
					console.log(res)
					this.tableData = res.data.rows
					this.page.total = res.data.total
					
				})
			}
		},
		created() {
			this.getFindBrandByPage()
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main{
		.content-card{
			margin: 30px;
		}
	}
</style>
